<template>
  <div @click="showDrawer">数据库管理上传</div>
  <a-drawer
    :width="680"
    v-model:open="open"
    title="数据库管理上传"
    placement="right"
  >
    <div style="width: 360px; margin: 0 auto">
      <a-steps :current="current" :items="items"></a-steps>
    </div>
    <div style="margin-top: 27px" v-show="current === 0">
      <upload-db-step-1 @next="onNext" />
    </div>
    <div style="margin-top: 35px" v-show="current === 1">
      <upload-db-step-2 @prev="onPrev" @confirm="onConfirm" />
    </div>
  </a-drawer>
</template>
<script setup>
import { ref } from 'vue'
import UploadDbStep1 from './upload-db-step-1.vue'
import UploadDbStep2 from './upload-db-step-2.vue'

/**
 * 抽屉相关
 */
let open = ref(false)
let showDrawer = () => {
  open.value = true
}
/**
 * step
 */
let current = ref(0)
let items = ref([
  { key: '地址/账号', title: '地址/账号' },
  { key: '选择数据', title: '选择数据' },
])
/**
 * 切换事件
 */
function onNext() {
  current.value = 1
}
function onPrev() {
  current.value = 0
}
/**
 * 确定
 */
function onConfirm() {
  open.value = false
}
</script>
